<template>
    <div class="buttombar" >
        <div class="allOk" v-on:click="addChecked">
            <CheckButton v-bind:isChecked="btnIsChecked"></CheckButton>
            <span>全选</span>
        </div>
        <div class="countprice">
            合计:{{titlePrice}}
        </div>
        <div class="countbth" v-on:click="goCount">
            去结算:{{checkLength}}
        </div>
    </div>
</template>
<script>
import CheckButton from "@/components/content/checkButton/CheckButton";
export default {
    name: "CartButtomBar",
    components:{
        CheckButton
    },
    computed:{
        btnIsChecked(){
            if(this.$store.state.cartList.length===0) return false
            return !this.$store.state.cartList.find(item => !item.isChecked)
        },
        titlePrice(){
            return '￥'+this.$store.state.cartList.filter(item=>{
                return item.isChecked
            }).reduce((preValue,item)=>{
                return preValue+ parseInt(item.price.substring(1))*item.count
            },0)
        },
        checkLength(){
            return this.$store.state.cartList.filter(item=>item.isChecked).length
        }
    },
    methods:{
        addChecked(){
            if(this.btnIsChecked){
                this.$store.state.cartList.forEach(item => item.isChecked=false)
            }else {
                this.$store.state.cartList.forEach(item => item.isChecked=true)
            }
        },
        goCount(){
          if(this.checkLength){
            this.$toast.show('结算成功！',1000)
          }
        }
    }
}
</script>
<style scoped>
.buttombar{
    height: 44px;
    position: relative;
    background: #eeeeee;
    display: flex;
}
.allOk{
    display: flex;
    padding-top: 13px;
    padding-left: 5px;
    width: 20%;
}
.allOk span{
    padding-top: 2px;
    margin-left: 5px;
}
.countprice{
    width: 60%;
    line-height: 44px;
}
.countbth{
    width: 20%;
    background: #fe7088;
    color: white;
    font-weight: bold;
    text-align: center;
    line-height: 44px;
}
</style>
